import Vue from 'vue';

// 使用 Vue.directive() 定义一个全局指令
// 1. 参数一： 指令的名称， 定义时指令前面不需要写 v-
// 2. 参数二： 是一个对象，该对象中有相关的操作函数
// 3. 在调用的时候必须写 v-
const drag = Vue.directive('drag', {
    // 1. 指令绑定到元素上会立即执行bind函数，只执行一次
    // 2. 每个函数中第一个参数永远是el,表示绑定指令的元素，el参数是原生js对象
    // 3. 通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
    bind: function(el) {},
    // inserted 表示一个元素，插入到DOM中会执行 inserted 函数，只会触发一次
    inserted: function(el) {
        el.onmousedown = function (e) {
            // 这样写即是在子元素上添加之类让父盒子移动       不添加 parentElement 即是让自己移动
            let disx = e.pageX - el.parentElement.offsetLeft;
            let disy = e.pageY - el.parentElement.offsetTop;
            document.onmousemove = function(e) {
                el.parentElement.style.left = e.pageX - disx + 'px';
                el.parentElement.style.top = e.pageY - disy + 'px';
            };
            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
            };
        };
    },
    // 当 VNode 更新的时候会执行 updated, 可以触发多次
    update: function(el) {}
});

export default drag;
